<template>
  <div :class="{
    ['xmov-toast']: true,
    ['xmov-toast-pc']: equ === 'pc'
  }">
    <div :class="{
      ['xmov-toast-content']: true, 'h-full': showIcon
    }">
      <svg-icon v-if="showIcon" :name="name" class="toast-icon" />
      <span>{{ msg }}</span>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="Toast"
>
import { equ } from '../../../package-env';
import { closeTost } from '@/utils/comps';

defineProps({
  msg: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: equ === 'pc' ? 'pc-info' : 'info'
  },
  showIcon: {
    type: Boolean,
    default: true,
  }
});

let timer = null;

const close = () => {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
}

onMounted(() => {
  close();
  timer = setTimeout(() => closeTost(), 1500);
})

onBeforeUnmount(() => {
  close();
})
</script>
